<template>
  <div class="detail-container">
    <!-- 页头 -->
    <div class="pageHeader-container">
      <el-page-header content="订单详情" @back="$router.push('/orderForm')" />
    </div>
    <!-- 卡片 -->
    <div class="card-container">
      <el-card class="card-inner">
        <el-row :gutter="20" class="card-row">
          <el-col :span="6" class="row-col"><div>订单编号：<span class="render">{{ orderInfo.id }}</span></div></el-col>
          <el-col :span="6" class="row-col"><div>运单编号：<span class="render">{{ orderInfo.transportOrder.id }}</span></div></el-col>
          <el-col :span="6" class="row-col"><div>下单时间：<span class="render">{{ orderInfo.createTime }}</span></div></el-col>
          <el-col :span="6" class="row-col"><div>订单状态：
            <span v-if="orderInfo.status===22000" class="render">已关闭</span>
            <span v-if="orderInfo.status===23000" class="render">待取件</span>
            <span v-if="orderInfo.status===23001" class="render">已取件</span>
            <span v-if="orderInfo.status===23002" class="render">网点自寄</span>
            <span v-if="orderInfo.status===23003" class="render">网点入库</span>
            <span v-if="orderInfo.status===23004" class="render">待装车</span>
            <span v-if="orderInfo.status===23005" class="render">运输中</span>
            <span v-if="orderInfo.status===23006" class="render">网点出库</span>
            <span v-if="orderInfo.status===23007" class="render">待派送</span>
            <span v-if="orderInfo.status===23008" class="render">派送中</span>
            <span v-if="orderInfo.status===23009" class="render">已签收</span>
            <span v-if="orderInfo.status===23010" class="render">拒收</span>
            <span v-if="orderInfo.status===23011" class="render">已取消</span>
          </div></el-col>
        </el-row>
        <el-row :gutter="20" class="card-row">
          <el-col :span="6" class="row-col"><div>预计到达时间：<span class="render">{{ orderInfo.estimatedArrivalTime }}</span></div></el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 折叠面板 -->
    <div class="collapse-container">
      <el-collapse v-model="activeName" class="collapse-inner" @change="handleChange">

        <!-- 基本信息 -->
        <el-collapse-item class="collapseItem" title="基本信息" name="1">
          <div class="timeline">
            <el-timeline>
              <el-timeline-item size="large" color="#105bde" icon="el-icon-location" timestamp="发货方" placement="top">
                <div class="timeline-content">
                  <el-row class="timeInfo">
                    <el-col :span="8"><span>发货方姓名：<span class="render">{{ orderInfo.senderName }}</span></span></el-col>
                    <el-col :span="8"><span>发货方电话：<span class="render">{{ orderInfo.senderPhone }}</span></span></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8"><span>发货方地址：<span class="render">{{ orderInfo.senderProvince.name }}{{ orderInfo.senderCity.name }}{{ orderInfo.senderCounty.name }}</span></span></el-col>
                    <el-col :span="8"><span>详细地址：<span class="render">{{ orderInfo.senderAddress }}</span></span></el-col>
                  </el-row>
                </div>
              </el-timeline-item>
              <el-timeline-item size="large" color="#cf4141" icon="el-icon-location-outline" timestamp="收货方" placement="top">
                <div class="timeline-content">
                  <el-row class="timeInfo">
                    <el-col :span="8"><span>收货方姓名：<span class="render">{{ orderInfo.receiverName }}</span></span></el-col>
                    <el-col :span="8"><span>收货方电话：<span class="render">{{ orderInfo.receiverPhone }}</span></span></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="8"><span>收货方地址：<span class="render">{{ orderInfo.receiverProvince.name }}{{ orderInfo.receiverCity.name }}{{ orderInfo.receiverCounty.name }}</span></span></el-col>
                    <el-col :span="8"><span>详细地址：<span class="render">{{ orderInfo.receiverAddress }}</span></span></el-col>
                  </el-row>
                </div>
              </el-timeline-item>
              <el-timeline-item size="large" color="#ffb302" icon="el-icon-s-flag" :timestamp="timestampText" placement="top">
                <div class="timeline-content">
                  <el-row>
                    <el-col :span="8"><span>备注：暂无</span></el-col>
                  </el-row>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-collapse-item>

        <!-- 取件信息 -->
        <el-collapse-item class="collapseItem" title="取件信息" name="1">
          <div class="card-inner">
            <el-row :gutter="20" class="card-row">
              <el-col :span="6" class="row-col"><div>所在网点：<span class="render">{{ orderInfo.taskPickup.agency.name }}</span></div></el-col>
              <el-col :span="6" class="row-col"><div>取件类型：
                <span class="render">{{ orderInfo.pickupType===0?'上门取件':'网点自寄' }}</span>
              </div></el-col>
              <el-col :span="6" class="row-col"><div>作业状态：<span class="render">{{ orderInfo.taskPickup.status===1?'已完成': orderInfo.taskPickup.status===2?'新任务':'已取消' }}</span></div></el-col>
              <el-col :span="6" class="row-col"><div>取件快递员：<span class="render">{{ orderInfo.taskPickup.courier.name }}</span></div></el-col>
            </el-row>
            <el-row :gutter="20" class="card-row">
              <el-col :span="6" class="row-col"><div>快递员电话：<span class="render">{{ orderInfo.taskPickup.courier.mobile }}</span></div></el-col>
              <el-col :span="6" class="row-col"><div>预计取件时间：<span class="render">{{ orderInfo.estimatedStartTime }}</span></div></el-col>
              <el-col :span="6" class="row-col"><div>取件完成时间：<span class="render">{{ orderInfo.taskPickup.actualEndTime }}</span></div></el-col>
            </el-row>
          </div>
        </el-collapse-item>

        <!-- 费用信息 -->
        <el-collapse-item class="collapseItem" title="费用信息" name="1">
          <div class="card-inner">
            <el-row :gutter="20" class="card-row">
              <el-col :span="6" class="row-col"><div>运费：<span style="font-size:18px;color:#ffb302;margin-right:10px;">{{ orderInfo.amount }}</span>元</div></el-col>
              <el-col :span="6" class="row-col"><div>支付方式：<span class="render">{{ orderInfo.paymentMethod===1?'预结':'到付' }}</span></div></el-col>
              <el-col :span="6" class="row-col"><div>付款状态：<span class="render">{{ orderInfo.paymentStatus===2?'未付':'已付' }}</span></div></el-col>
            </el-row>
          </div>
        </el-collapse-item>

        <!-- 货品信息 -->
        <el-collapse-item class="collapseItem" title="费用信息" name="1">
          <div class="table">
            <el-table
              stripe
              show-summary
              :data="orderCargoDTOS"
              style="width: 100%"
              :header-cell-style="{background: '#f8faff'}"
            >
              <el-table-column
                fixed
                prop="order"
                type="index"
                label="序号"
                width="80px"
              />
              <el-table-column
                prop="name"
                label="货品名称"
                width="200px"
              />
              <el-table-column
                prop="goodsType.name"
                label="货品类型"
                width="210px"
              />
              <el-table-column
                prop="weight"
                label="重量(千克)"
                width="210px"
              />
              <el-table-column
                prop="volume"
                label="体积(立方)"
                width="210px"
              />
              <el-table-column
                fixed="right"
                label="操作"
                width="150px"
              >
                <template v-slot="">
                  <el-button type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small" style="color:#f56c6c">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import { getOrderDetail } from '@/api/orderManagement'
export default {
  name: 'OrderDetail',
  data() {
    return {
      activeName: '1',
      // 订单详情数据
      orderInfo: {},
      timestampText: '',
      orderCargoDTOS: '' // 货品信息
    }
  },
  created() {
    this.getOrderDetail()
  },
  methods: {
    async getOrderDetail() {
      if (this.$route.params.id) {
        const res = await getOrderDetail(this.$route.params.id)
        console.log(this.$route.params.id)
        const { data } = res.data
        // console.log(data)
        this.orderInfo = data
        this.timestampText = '距离：' + data.distance + 'km'
        this.orderCargoDTOS = data.orderCargoDTOS
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .detail-container {
        background: rgb(243, 245, 249);

        .render {
          color: #818693;
        }

        .pageHeader-container {
            font-weight: bold;
            color: rgb(42, 41, 41);
            font-size: 20px;
            margin-bottom: 23px;
        }

        ::v-deep .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, el-card.is-hover-shadow:hover{
            box-shadow: none;
        }

        .card-inner {
          background: #fff;
          padding: 7px 0 7px 44px;
          font-size: 14px;

            .card-row {
                line-height: 2.6;

                .row-col {
                    padding-left: 10px;
                    padding-right: 10px;
                }
            }
        }

        .collapse-container .collapse-inner {

          .timeline {
            padding-left: 44px;
          }

             ::v-deep .el-collapse-item__header {
                padding: 0 44px;
                align-items: center;
                height: 60px;
                line-height: 60px;
                background: #f8faff!important;
                border-radius: 4px 4px 0 0;
                color: #2a2929;
                cursor: pointer;
                border-bottom: 0;
                font-size: 16px;
                font-weight: 700;
            }

            ::v-deep .el-collapse-item__content {
              padding-bottom: 2px;
              background: #fff;
            }

            .steps-container {
                padding: 24px 400px 0 44px;

                ::v-deep .el-step__line {
                    border-bottom: 1px solid #419eff;
                    background-color: transparent;
                }

                ::v-deep .el-icon-circle-check {
                    color: #419eff;
                }

                ::v-deep .el-step__title {
                    font-size: 14px;
                    font-weight: 400;
                    color: #20232a;
                }
            }

            .timeInfo {
                margin-bottom: 14px;
            }

            // 时间图标样式
            ::v-deep .el-timeline-item__node--large {
              margin-top: 5px;
              width: 20px;
              height: 20px;
            }

            // 时间竖线样式
            ::v-deep .el-timeline-item__tail{
              border: none;
            }

            // 时间戳样式
            ::v-deep .el-timeline-item__timestamp {
                font-size: 16px;
                font-family: PingFangSC-Regular,PingFang SC;
                font-weight: 400;
                color: #20232a;
                line-height: 28px;
            }

            .collapseItem {
                margin-top: 20px;
            }

            .timeline {
                padding: 24px 44px;
                font-size: 13px;
                color: #303133;
                line-height: 1.769230769230769;
            }

            .table {
              margin: 24px 24px;
              border: 1px solid #EBEEF5
            }
        }
    }

</style>
